<template>
  <ul class="tab-container">
    <li @click="$emit('test', 'hi')" v-for="item in options" :key="uuid(item)" class="tab-item"><span>{{ item.label }}</span></li>
  </ul>
</template>

<script>
  import moment from 'moment'
  export default {
    name: 'Tab',
    props: {
      options: {
        type: Array,
        required: true
      }
    },
    methods: {
      uuid (item) {
        return moment.now() + '_' + item.value
      }
    }
  }
</script>

<style lang="less" scoped>
  .tab-container {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    .tab-item {
      text-align: center;
      width: 50%;
      float: left;
      line-height: 21px;
      cursor: pointer;
      &.selected {
        border-bottom: 3px solid #155bd4;
      }
    }
  }
</style>
